/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2025-03-20 11:20:24
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-04-21 18:20:40
 * @FilePath: \my-book-react\src\pages\search\compoments\searchHot\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import cx from 'classnames';
import { Space } from '@/bases';
import api from '@/pages/search/api';
import { setHistory } from '@/pages/search/utils';
import { useRequest } from '@/hooks/useRequest';
import { setSearchMode, setSearchKeyword } from '@/stores/slices/searchSlice';
import { searchActions } from '@/pages/search/stores';
import { useAppSelector, useAppDispatch } from '@/stores';
import { setUrlParams } from '@/utils/url';
import { px2rem } from '@/utils/unit';
import styles from './index.module.scss';
const SaarchHot: React.FC = React.memo(() => {
  const dispatch = useAppDispatch();
  const searchMode = useAppSelector<boolean>((state) => state.search.searchMode);
  const { data, error } = useRequest<string[]>({ url: api.getHotSearch });
  if (!data || error) {
    return null;
  }
  const onSearch = (e: React.MouseEvent) => {
    const keyword = (e.target as HTMLDivElement).dataset['keyword'] as string;
    setHistory(keyword);
    setUrlParams([['keyword', keyword]], '/search');
    dispatch(searchActions.setSearchMode(true));
    dispatch(searchActions.setSearchKeyword(keyword));
  };
  return (
    <div className={cx(styles.searchHot, { [styles.hidden]: searchMode })}>
      <div className={styles.title}>热门搜索</div>
      <div className={styles.searchTags}>
        <Space wrap gap={[px2rem(20), px2rem(10)]}>
          {data.map((item, index) => (
            <div key={index} className={styles.tag} data-keyword={item} onClick={onSearch}>
              {item}
            </div>
          ))}
        </Space>
      </div>
    </div>
  );
});
export default SaarchHot;
